<template>
  <div>
    <el-row>
 
    <el-col :span="1"> <p>消费者</p></el-col>
    <el-col :span="2">
      <el-select
        v-model="params.selectedCustomer"
        placeholder="请选择消费者"
        @change="selectCustomer" 
        value-key="id"
      >
        <el-option
          :label="item.customerName"
          :value="item.id"
          v-for="item in customers"
          :key="item.id"
        ></el-option>
      </el-select>
    </el-col>
    <el-col :span="3"> <p>消费时间范围</p></el-col>
    <el-col :span="3">
      <el-date-picker
        v-model="params.dateRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="mini"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="dateFormat"
      >
      </el-date-picker
    ></el-col>    
    </el-row>
    <el-row>

  
    <el-col :span="5">
      <el-button type="primary" icon="el-icon-search" @click="searchData()"
        >查询柱状图</el-button
      >
    </el-col>
    <el-col :span="5">
      <el-button type="primary" icon="el-icon-search" @click="searchLineData()"
        >查询折线图</el-button
      >
    </el-col>
    <el-col :span="3">
      <el-button type="success" icon="el-icon-search" @click="reload()"
        >清空</el-button
      >
    </el-col>
    <el-col :span="3">
      <el-button type="success" icon="el-icon-search" @click="downloadFile()"
        >下载图片</el-button
      >
    </el-col>
      </el-row>
    <div style="width: 50% margin-top:50px">
      <div id="bar" style="width: 100%; height: 400px"></div>
    </div>
    <div style="width: 50% margin-top:50px">
      <div id="line" style="width: 100%; height: 400px"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      dateRange:[],
      customers:[],
      params:{
        selectedCustomer:'',
        startDate:'',
        endDate:'',
        dateRange:'',
        customerName:''
      }
    };
  },
  mounted(){
   this.selectCustomer()
  },
  methods:{
    dateFormat(picker) {
      /* 法一 */
      this.params.startDate = picker[0]
      this.params.endDate = picker[1]
      /* 法二 */
      // let startDate = this.params.date.toString()
      // this.params.startTime = startDate.substring(0, 10)
      // this.params.endTime = startDate.substring(11)
    },
    searchData(){
    // const [startDate, endDate] = this.dateRange;
    // +this.params.startDate+
    //   "&endTime="+this.params.endDate+this.selectedCustomer
    this.$axios.post('/data/searchSales',this.params)
    .then(res=>{
      console.log(res.data.data)
        const data = res.data.data;
          const proName = data.map((item) => item.customerName);
          const proNum = data.map((item) => item.salesAmount);
          this.initBar(proName, proNum);
         
      }
    )
   }, 
    searchLineData(){
    // const [startDate, endDate] = this.dateRange;
    // +this.params.startDate+
    //   "&endTime="+this.params.endDate+this.selectedCustomer
    this.$axios.post('/data/searchSales',this.params)
    .then(res=>{
      console.log(res.data.data)
        const data = res.data.data;
          const proName = data.map((item) => item.customerName);
          const proNum = data.map((item) => item.salesAmount);
          
         this.initLine(proName,proNum);
      }
    )
   }, 
   initLine(proName, proNum) {
      let chartDom = document.getElementById("bar");
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: "顾客消费额",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: proName,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: proNum,
            type: "line",
             itemStyle: {
            color: '#73c0de'
          }
          },
        ],
      };

      option && myChart.setOption(option);
      // this.downLoad(myChart,'在Vue中使用echarts')
    },
      initBar(proName, proNum) {
      let chartDom = document.getElementById("bar");
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: "顾客消费额",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: proName,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: proNum,
            type: "bar",
             itemStyle: {
            color: '#73c0de'
          }
          },
        ],
      };

      option && myChart.setOption(option);
      // this.downLoad(myChart,'在Vue中使用echarts')
    },
    selectCustomer(){
    this.$axios.get("/data/inquireCustomer").then((res)=>{
        console.log(res.data.data)
        this.customers=res.data.data
        console.log(this.params.selectedCustomer)
    })
    },
    reload(){
      this.params.selectedCustomer='',
      this.params.dateRange=''
    }, // 下载
	  // 点击保存下载图片
      downloadFile() {
        let aLink = document.createElement('a');
        let blob = this.base64ToBlob();
        let evt = document.createEvent('HTMLEvents');
        evt.initEvent('click', true, true);
        aLink.download = "顾客消费额查询图"; //下载图片的名称
        aLink.href = URL.createObjectURL(blob);
        aLink.click();
      },
      exportImg() { //echart返回一个 base64 的 URL
        let myChart = echarts.init(
          document.getElementById("bar")
        );
        return myChart.getDataURL({
          type: 'png',
          pixelRatio: 1,
          backgroundColor: '#fff'
        })
      },
      base64ToBlob() { //将base64转换blob
        let img = this.exportImg();
        let parts = img.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
          type: contentType
        });
      },


  }
};
</script>
<style scoped>
</style>